import React from 'react'
import { useState } from 'react'
import { Cascader, Cell } from '@nutui/nutui-react'
export default function Xiao() {
  const [list,setlist]=useState([
    {id:1,name:'保定理工学院新生1群',img:''},
    {id:1,name:'保定理工学院新生1群',img:''},
    {id:1,name:'保定理工学院新生1群',img:''},
    {id:1,name:'保定理工学院新生1群',img:''},
    {id:1,name:'保定理工学院新生1群',img:''},
    {id:1,name:'保定理工学院新生1群',img:''},
    {id:1,name:'保定理工学院新生1群',img:''},
    {id:1,name:'保定理工学院新生1群',img:''},
    {id:1,name:'保定理工学院新生1群',img:''},
    {id:1,name:'保定理工学院新生1群',img:''},
    

  ])
  const [isVisibleDemo1, setIsVisibleDemo1] = useState(false)
  const [value1, setValue1] = useState("")
  const [optionsDemo1] = useState([
    {
      value: '浙江',
      text: '浙江',
      children: [
        {
          value: '杭州',
          text: '杭州',
          disabled: true,
          children: [
            { value: '西湖区', text: '西湖区', disabled: true },
            { value: '余杭区', text: '余杭区' },
          ],
        },
        {
          value: '温州',
          text: '温州',
          children: [
            { value: '鹿城区', text: '鹿城区' },
            { value: '瓯海区', text: '瓯海区' },
          ],
        },
      ],
    },
    {
      value: '湖南',
      text: '湖南',
      disabled: true,
      children: [
        {
          value: '长沙',
          text: '长沙',
          disabled: true,
          children: [
            { value: '芙蓉区', text: '芙蓉区' },
            { value: '岳麓区', text: '岳麓区' },
          ],
        },
        {
          value: '岳阳',
          text: '岳阳',
          children: [
            { value: '岳阳楼区', text: '岳阳楼区' },
            { value: '云溪区', text: '云溪区' },
          ],
        },
      ],
    },
    {
      value: '福建',
      text: '福建',
      children: [
        {
          value: '福州',
          text: '福州',
          children: [
            { value: '鼓楼区', text: '鼓楼区' },
            { value: '台江区', text: '台江区' },
          ],
        },
      ],
    },
  ])
  const change1 = (value, path) => {
    console.log('onChange', value, path)
    setValue1(value)
  }
  return (
    <div style={{backgroundColor:'rgb(247,247,247)',width:'100vw',height:'100vh'}}>
      <p style={{marginLeft:'20px'}}><img src='https://cdn7.axureshop.com/demo2024/2268035/images/%E6%A0%A1%E5%9B%AD%E8%81%8A/u497.svg' style={{
        width:'320px',height:'130px',borderRadius:'10px'
      }}></img></p>
      <div>
      </div>
        <div style={{width:'90%',margin:'0 auto',marginTop:'20px'}}>
            <p style={{fontSize:'18px'}}      onClick={() => {
          setIsVisibleDemo1(true)
        }}>
            {value1.slice(0,1)}&nbsp; {value1.slice(1,2)}&nbsp; {value1.slice(2,3)}&nbsp;
       {value1?'':<span style={{marginLeft:'-20px'}}>请选择地址</span>}
      <Cascader
        popupProps={{
          className: 'cascader-popup',
        }}
        visible={isVisibleDemo1}
        value={value1}
        title="选择地址"
        options={optionsDemo1}
        closeable
        onClose={() => {
          setIsVisibleDemo1(false)
        }}
        onChange={change1}
      />
              
             
              
              
              </p>
            <hr style={{marginTop:'5px',marginBottom:'5px'}}></hr>
            <p style={{marginTop:"10px",fontSize:'18px'}}>  
           
              {value1?value1.slice(0,1)+"大学":'请选择大学'}</p>
            <p style={{marginTop:"10px",fontSize:'18px'}}></p>
        </div>
        <div style={{width:'90%',margin:'0 auto',marginTop:'20px'}}>
          <p style={{fontWeight:'bold'}}>   查找结果(55)</p>
          {list.map(item=>{
            return   <div style={{width:'330px',float:"left",marginTop:'20px'}}>
            <img style={{float:'left'}} src='https://cdn7.axureshop.com/demo2024/2268035/images/%E6%A0%A1%E5%9B%AD%E8%81%8A/p40.png'></img>
            <span  style={{float:'left',paddingTop:'10px',paddingLeft:'10px'}} >{item.name}</span>
            <span style={{float:'right',color:"gray",paddingTop:'10px',fontSize:'12px'}}>已满员</span>
            </div>
          })}
        </div>
    </div>
  )
}
